iT邦幫忙

2024 iThome 鐵人賽

DAY 30
1
JavaScript

30天享用JavaScript概念三明治系列 第 30

Day30:ES6後變數宣告方式const、let

  • 分享至 

  • xImage
  •  

時間飛快,居然堅持到第三十天了!結果我才吃完「上層麵包」。最後一天要寫什麼呢?原本想逞強,但如果囫圇吞棗,寫出自己看不懂的也沒意義。於是回顧前面29天,從中挑出想要加強的地方。發現自己常常程式碼寫範例時,尤其在使用宣告變數用的varletconst時,常常搞不清楚誰是誰跟使用時機,撰寫時跳來跳去一下用var一下用let,造成版面不一致實感抱歉。謝謝包容。

然而作者在書中範例程式碼裡幾乎是用var。但不是說var容易造成語法混肴,最好不要用了嗎?為什麼在書中範例還是使用呢?後來有解惑,雖然實際產品開發時少用var,但是又不能忘記它,要使用在哪呢?於是大多用於教學影片或書中範例程式碼中能看見它。開始與結束有始有終(當然不是真的終點),最後一天回歸初心,複習複習囉!


ES6後變數宣告方式constlet (P3-26)

  • var在ES6前就有了。但缺點是,由於使用範疇問題,程式碼在撰寫後如要除錯過程會不便利。
  • constlet是為了避免變數被修改或覆蓋,為了解決只用var撰寫程式碼的缺點,在ES6後出現的兩個新的變數宣告關鍵字,也是目前實際產品開發中最常用到的兩個語法。
  • 那都是變數如何使用:大部分情況能用const就用const、其次let、最後var

let (P3-26)

  • letvar類似,與var不同的就是宣告變數的範疇、以及不能被重複宣告。
  • var是函式範疇,而let是區塊範疇。
  • 區塊範疇明顯的優點就是,能夠更有效避免變數意外被修改或覆蓋。

由於let具有區塊範疇,因此在區塊外取得不到name的變數“Ann”。(但為何是印出"Hello CodePen"。我得想一下。)
https://ithelp.ithome.com.tw/upload/images/20240831/20168361Q9T1xb6wxP.png

由於var具有函式範疇,因此在區塊外也能取得name的變數“Ann”。
https://ithelp.ithome.com.tw/upload/images/20240831/20168361wYprQl5mdp.png

https://ithelp.ithome.com.tw/upload/images/20240831/20168361MGJnX79V0Y.png
使用var缺點,會有結果不明確的狀況,因此實際開發時少用。譬如當在全域宣告一個變數i,並在後面使用for迴圈,for迴圈裡也用了另一個新宣告的i,但會發現在for條件判斷用的i在迴圈進行時也對外面的全域變數i進行修改。最後,全域外面變數i的內容就跟著變成10(預期是0)。

https://ithelp.ithome.com.tw/upload/images/20240831/20168361Khp50iCUag.png
如果使用constlet這個問題就能避免。

const (P3-27)

  • constlet的範疇是相同的。但與let不同的是,在JavaScript中,const用來聲明常數變數,即一旦賦值後不能再被重新賦值。如果嘗試對const變數進行重新賦值,就會引發錯誤。

https://ithelp.ithome.com.tw/upload/images/20240831/20168361BH35WX4TQI.png

https://ithelp.ithome.com.tw/upload/images/20240831/201683614mNIbtKGnu.png

https://ithelp.ithome.com.tw/upload/images/20240831/2016836103mnvx9cUL.png

  • 但對於物件和陣列,const限制的是變數的綁定,而不是物件的內容。可以修改物件或陣列的內容,但不能重新賦值整個變數。
    https://ithelp.ithome.com.tw/upload/images/20240831/20168361okgdExTbTM.png

上一篇
Day29:區塊範疇
系列文
30天享用JavaScript概念三明治30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言